<template>
  <div class="echarts-wall" :style="echartsStyle">
    <div class="dot-bg" v-if="loading"></div>
    <div class="dot-elastic dotClass" v-if="loading"></div>
    <div class="echarts-content" ref="echartsDom"></div>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import {ElMessage} from "element-plus";
// @ts-ignore
import screenConfig, {getMarkPoint} from '@/components/global/bigscreen/screen_config'

defineOptions({
  name: "EchartsHalfRing"
});
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";

const loading = ref<boolean>(false);

const props = defineProps({
      barWidth: {type: Number, default: screenConfig.barWidth},
      legendShow: {type: Boolean, default: false},
      legendOrient: {type: String, default: 'vertical'},//vertical
      legendLeft: {type: String, default: 'left'},//vertical
      title: {type: Object, default: {}},
      fontColor: {type: String, default: "#fff"},
      grid: {
        type: Object, default: function () {
          return {
            left: '10',
            top: '10',
            right: '10',
            bottom: '20'
          }
        }
      },
      color: {
        type: Array, default: function () {
          return ['#454bb3', '#a17131', '#a3a71a', '#0aa75b', '#0a7fb3'];
        }
      },
      url: {
        type: String, default: ''
      },
      params: {
        type: Object, default: {}
      }
    }
);
// dom 组件
const echartsDom = ref<any>(null);

const echartsStyle = ref<any>({});

// @ts-ignore
let {proxy} = getCurrentInstance()

//
let myEcharts: any = null;

onMounted(() => {
  initEcharts()
})

//监听查询条件
watch(() => props.params, () => {
  initEcharts();
})
const initEcharts = () => {
  getData().then((option: any) => {
    myEcharts = proxy.$echarts.init(echartsDom.value);
    if (myEcharts) {
      myEcharts.clear();
      myEcharts.setOption(option)
    }
  });
}


const tooltip = (i: number) => {
  let formatter = '{b} : {c}';
  if (i > 1) {
    formatter = '';
  }
  return {
    show: true,
    trigger: 'item', //axis , item
    backgroundColor: 'RGBA(0, 49, 85, 1)',
    borderColor: 'rgba(0, 151, 251, 1)',
    borderWidth: 1,
    borderRadius: 0,
    textStyle: {
      color: '#BCE9FC',
      fontSize: 16,
      align: 'left',
    },
    formatter,

  }
}

const legend = () => {
  return {
    show: props.legendShow,
    orient: props.legendOrient,
    left: props.legendLeft,
    textStyle: {
      fontSize: screenConfig.legendFontSize,
      fontFamily: screenConfig.legendFontFamily,
      color: screenConfig.legendFontColor,
    },
  }
}
const getData = () => {
  return new Promise((resolve, reject) => {
        if (props.url) {
          loading.value = true;
          proxy.$http.post(props.url, props.params)
              .then((apiResponse: any) => {
                    if (apiResponse.success || apiResponse.data) {
                      //获取的数据
                      let echartsData = apiResponse.data.echartsData;
                      let i = 0;
                      let max = 0;
                      let sum = 0;
                      let data: any = null;
                      Object.keys(echartsData).forEach((key: string) => {
                        if (i === 0) {
                          data = echartsData[key];
                          max = Math.max(...data.map((item: any) => item.value));
                          sum = eval(data.map((item: any) => item.value).join('+'));
                        }
                        i++;
                      });

                      let option: any = {
                        backgroundColor: 'transparent',
                        angleAxis: {
                          show: 0,
                          clockwise: false,
                          max: max + max / 3,
                        },
                        radiusAxis: {
                          type: 'category',
                          data: data.map((item: any) => {
                            return item.name + ':' + ' ' + ((item.value / sum) * 100).toFixed() + '%';
                          }),
                          z: 0,
                          axisLine: {
                            show: false,
                          },
                          axisTick: {
                            show: false,
                          },
                          axisLabel: {
                            interval: 0,
                            color: props.fontColor,
                            align: 'left',
                            margin: -10,
                          },
                        },
                        polar: {
                          show: 100,
                          center: ['50%', '50%'],
                        },
                        title: props.title,
                        grid: props.grid,
                        series: [{
                          type: 'bar',
                          data: data.map((item: any, index: any) => {
                            return {
                              value: item.value,
                              name: item.name,
                              itemStyle: {
                                color: props.color[index],
                              },
                            };
                          }),
                          label: {
                            show: false,
                            position: 'top',
                          },
                          barWidth: props.barWidth,
                          coordinateSystem: 'polar',
                          barGap: '100%', //柱间距离,用来将上下两种圆环重合
                        }]
                      };
                      loading.value = false;
                      resolve(option);
                    } else {
                      ElMessage.error("数据格式异常,本组件接收数据类型")
                    }
                  }
                  ,
                  (err: any) => {
                    reject(err);
                  }
              )
          ;
        } else {
          reject("无法获取请求地址");
        }
      }
  )
}
</script>